﻿<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@ include file="taglibs.jsp" %>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" href="${css}/bootstrap.min.css" type="text/css">
    <link rel="stylesheet" href="${css}/map/ol.css" type="text/css">
    <link rel="stylesheet" href="${css}/map/ol3-layerswitcher.css" type="text/css">
    <link rel="stylesheet" href="${css}/map/ol3-contextmenu.min.css" type="text/css">
    <link rel="stylesheet" href="${css}/map/map.css" type="text/css">
    <title>在线用户</title>
</head>
<body>
<div id="map" class="map"></div>
<div id="tools" class="tools" style="width: 100%;color: #fff;text-align: center">
    <h2>在线用户</h2>
</div>
</body>

<script src="${js}/map/lib/ol.js" type="text/javascript"></script>
<script src="${js}/map/style.js" type="text/javascript"></script>
<script>

    $(function () {
        var geojson = JSON.parse('${geojson}');

        var source = new ol.source.Vector({
            features: (new ol.format.GeoJSON()).readFeatures(geojson)
        });

        var clusterSource = new ol.source.Cluster({
            projection: 'EPSG:4326',
            distance: 270,
            source: source
        });

        var styleCache = {};
        var clusters = new ol.layer.Vector({
            source: clusterSource,
            style: function (feature) {
                var size = feature.get('features').length;

                var style = styleCache[size];
                if (!style) {
                    style = new ol.style.Style({
                        text: new ol.style.Text({
                            text: size == 1 ? '' : size.toString(),
                            fill: new ol.style.Fill({
                                color: '#fff'
                            })
                        })
                    });

                    var image;
                    if (size == 1) {
                        image = new ol.style.Icon({
                            anchor: [0.5, 1],
                            scale: 1,
                            src: ctx + '/static/images/map/marker-blue.png'
                        });
                    } else {
                        image = new ol.style.Circle({
                            radius: 15,
                            stroke: new ol.style.Stroke({
                                color: '#f0f'
                            }),
                            fill: new ol.style.Fill({
                                color: '#3399CC'
                            })
                        })
                    }
                    style.setImage(image);

                    styleCache[size] = style;
                }
                return style;
            }
        });


        var map = new ol.Map({
            target: 'map',
            controls: ol.control.defaults({
                // 隐藏缩放按钮
                zoom: false
            }).extend([]),
            // 设置默认的交互行为
            interactions: ol.interaction.defaults({
                // 禁用双击放大
                doubleClickZoom: false,
                // 禁用旋转
                altShiftDragRotate: false,
                pinchRotate: false
            }),
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.XYZ({
                        url: 'http://mt2.google.cn/vt/lyrs=m@258000000&hl=zh-CN&gl=CN&src=app&x={x}&y={y}&z={z}&s=Ga'
                    })
                }),
                clusters
            ],
            view: new ol.View({
                center: [114.28, 30.55],
                projection: 'EPSG:4326',
                zoom: 9,
                minZoom: 4,
                maxZoom: 20
            })
        });
    });
</script>
</html>